<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script src="javascripts/jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function() {
               
                $(".signin").click(function(e) {          
                    e.preventDefault();
                    $("fieldset#signin_menu").toggle();
                    $("fieldset#signin_menu_deco").toggle();
                    $(".signin").toggleClass("menu-open");
                });
			
                $("fieldset#signin_menu").mouseup(function() {
                    return false
                });
                $(document).mouseup(function(e) {
                    if($(e.target).parent("a.signin").length==0) {
                        $(".signin").removeClass("menu-open");
                        $("fieldset#signin_menu").hide();
                    }
                });			
                /*Formulaire AJAX valide sans plugin  */
                $("#signin").submit(function() {
       
                    //Vérification avant envoi sur serveur
                    var email = $("#username").val();
                    var password = $("#mdp").val();
       
                    $.ajax({   
                        type: "POST",
                        url: "ServletConnexion",  
                        data: "action=authentifier&login="+email+"&motDePasse="+password,  
                        dataType: 'html',
                        success:function(reponse){
                            if(reponse == "true")
                            {
                                $("#connex_ins").html("Connecté");
                                $("#signin_menu").hide(); 
                                $(".signin").removeClass("menu-open");
                                $("#signin_menu").html("<a href=\"ServletConnexion?action=deconnexion\">Déconnexion</a>  ");
                            }
                            else{
                                
                                $("#erreur").html(reponse);
                                $("#erreur").show();
                              
                            }
                        } 
                        
                    });  
        
                    return false;
                });
            });
        </script>
        <script src="javascripts/jquery.tipsy.js" type="text/javascript"></script>
        <script type='text/javascript'>
            $(function() {
                $('#forgot_username_link').tipsy({gravity: 'w'});   
            });
        </script>
    </head>
    <body>
        <c:if test="${!connecte}">
            <div id="container">
                <div id="topnav" class="topnav"><a href="login" class="signin"> <span id="connex_ins">Connexion / Inscription</span></a> </div>
                <fieldset id="signin_menu">
                    <form method="post" id="signin" action="">
                        <label for="identifiant">Saisissez votre identifiant :</label>
                        <input type="text" id="username" name="login" placeholder="Identifiant"/> 
                        </p>
                        <p>
                            <label for="password">Saisissez votre mot de passe :</label>
                            <input type="password" id ="mdp" name="motDePasse" placeholder="Mot de passe"/>
                        </p> 
                        <input type="hidden" name="action" value="authentifier"/> 
                        <p class="remember">
                            <input id="signin_submit" value="Valider" tabindex="6" type="submit"><a href="newcompte.jsp">Créer un compte</a>
                            <span id="erreur"> ${messageErreur} </span>
                        </p>

                    </form>

                </fieldset> 
            </div>

        </c:if>

        <c:if test="${connecte}">
<!-- <span>Bienvenue ${u.prenom} ${u.nom}</span> -->
            <div id="container">
                <div id="topnav" class="topnav"><a href="login" class="signin"> <span id="connect">Connecté</span></a> </div>
                <fieldset id="signin_menu">
                    <a href="ServletConnexion?action=deconnexion">Déconnexion</a>   
                </fieldset>
            </div>

        </c:if>

